<!--
 * @Author: zsc
 * @Date: 2022-06-13 21:56:52
 * @LastEditors: zsc
 * @LastEditTime: 2022-07-24 21:34:31
 * @Description:
-->

<template>

  <el-dialog
    :before-close="beforeClose"
    :visible.sync="show"
    :title="title"
    width="60%"
    height="400px"
    append-to-body
    @close="close"
    @closed="closed"
  >
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="进" name="first">
        <page :where="false">
          <span slot="other" />
          <!--    查询条件-->
          <!--    表格-->
          <el-table
            slot="table"
            ref="tb"
            v-loading="LOADING"
            :data="CLASS_TABLE_DATA"
            :size="SIZE"
            border
            :height="LIST_HEIGHT_DIALOG"
            style="width: 100%"
            @selection-change="_handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <template v-for="(item) in setting">
              <el-table-column
                v-if="item.key === 'type'"
                :key="item.id"
                :label="item.name"
                :prop="item.key"
                :width="item.value"
                :fixed="item.fixed"
              >
                <template slot-scope="scope">
                  {{ scope.row.lock_door_type==1?'进':'出' }}
                </template>

              </el-table-column>
              <el-table-column
                v-else
                :key="item.id"
                :label="item.name"
                :prop="item.key"
                :width="item.value"
              />
            </template>
          </el-table>
          <!--    分页-->
          <pagination slot="pagination" />
          <!--    弹窗-->

        </page>
      </el-tab-pane>
      <el-tab-pane label="出" name="second">
        <page :where="false">
          <span slot="other" />
          <!--    查询条件-->
          <!--    表格-->
          <el-table
            slot="table"
            ref="tb"
            v-loading="LOADING"
            :data="CLASS_TABLE_DATA"
            :size="SIZE"
            border
            :height="LIST_HEIGHT_DIALOG"
            style="width: 100%"
            @selection-change="_handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <template v-for="(item) in setting">
              <el-table-column
                v-if="item.key === 'type'"
                :key="item.id"
                :label="item.name"
                :prop="item.key"
                :width="item.value"
                :fixed="item.fixed"
              >
                <template slot-scope="scope">
                  {{ scope.row.lock_door_type==1?'进':'出' }}
                </template>

              </el-table-column>
              <el-table-column
                v-else
                :key="item.id"
                :label="item.name"
                :prop="item.key"
                :width="item.value"
              />
            </template>
          </el-table>
          <!--    分页-->
          <pagination slot="pagination" />
        <!--    弹窗-->

        </page>
      </el-tab-pane>

    </el-tabs>
    <template slot="modal" />
  </el-dialog>

</template>

<script>
import list from '@/list'
import PersonClass from '@/models/warning-preson-class-for-component'
import { getWarningList } from '@/api/warning'
const personClass = new PersonClass()
export default {
  name: 'DeepInterpretationOrder',
  components: { },
  mixins: [list],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    idcard: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    }

  },
  data() {
    return {
      show: false,
      setting: personClass.list(),
      WHERE: {
        search: this.idcard
      },
      activeName: 'first'
    }
  },
  computed: {
    title() {
      return this.name + '-个人轨迹'
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.show = val
        this.WHERE.search = this.idcard
        this.WHERE.lock_door_type = (this.activeName === 'first' ? 1 : 2)
        console.log(this.WHERE)
        this._search()
      }
    }
  },
  created() {
    this.LIST_API = getWarningList
  },
  mounted() {
  },
  methods: {
    handleTabClick() {
      this.WHERE.lock_door_type = (this.activeName === 'first' ? 1 : 2)
      this._search()
    },
    beforeClose() {
      console.log('关闭前的回调')
      this.show = false

      this.$emit('update:visible', false)
    },
    close() {
      console.log('关闭的回调')
    },
    closed() {
      console.log('关闭动画结束后的回调')
    }
  }
}
</script>

